<template>
  <el-form
    :model="FormData"
    :inline="inline"
    :show-message="false"
    size="mini"
    class="demo-ruleForm"
    ref="ruleForm"
    label-position="left"
  >
    <el-row :gutter="20">
      <el-col
        :span="item.width ? item.width : 24"
        v-for="(item, index) in FormObj"
        :key="index"
        v-show="!item.notShow"
      >
        <el-form-item
          style="font-weight: 600"
          :label="item.label"
          :prop="item.prop"
          :rules="item.rules"
          :label-width="item.labelWidth"
        >
          <!-- inupt输入框 -->
          <el-input
            v-if="item.input"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            :placeholder="item.placeholder"
            @input="inputINPUT($event, index, item.prop)"
            @change="inputChange($event, index, item.prop)"
          ></el-input>
          <!-- textarea输入框 -->
          <el-input
            type="textarea"
            autosize
            v-if="item.textarea"
            :clearable="item.clearable"
            :disabled="item.disabled"
            v-model="FormData[item.prop]"
            :placeholder="item.placeholder"
          ></el-input>
          <!-- select选择器 -->
          <el-select
            v-if="item.select"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            :placeholder="item.placeholder"
            @change="selectChange($event, index, item.prop)"
          >
            <el-option
              :label="options.label"
              :value="options.value"
              v-for="(options, index) in item.options"
              :key="index"
            >
            </el-option>
          </el-select>
          <!-- select搜索框 -->
          <el-select
            v-if="item.searchSelect"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            filterable
            remote
            reserve-keyword
            :placeholder="item.placeholder"
            :remote-method="(query) => remoteMethod(query, index, item.prop)"
            @change="selectChange($event, index, item.prop)"
            :loading="searchSelectLoading"
          >
            <el-option
              v-for="(items, index) in item.options"
              :key="index"
              :label="items.content"
              :value="items.key"
            >
            </el-option>
          </el-select>
          <!-- 年月日时分秒选择器 -->
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            v-if="item.dateTime"
            :clearable="item.clearable"
            :disabled="item.disabled"
            v-model="FormData[item.prop]"
            :placeholder="item.placeholder"
            @change="dateTimeChange"
          ></el-date-picker>
          <!-- 年月日时分秒，开始和结束时间 -->
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            v-if="item.dateTimeRange"
            type="datetimerange"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- 时分秒选择器 -->
          <el-time-picker
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            v-if="item.timePicker"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            :placeholder="item.placeholder"
            :picker-options="item.options"
          >
          </el-time-picker>
          <!-- 时分秒选择器，开始和结束时间 -->
          <el-time-picker
            value-format="HH:mm:ss"
            format="HH:mm:ss"
            is-range
            v-if="item.timePickerIsRange"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
          <!-- 年月日选择器 -->
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-if="item.datePicker"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            :placeholder="item.placeholder"
          >
          </el-date-picker>
          <!-- 年月日选择器，开始和介绍年月日 -->
          <el-date-picker
            value-format="yyyy-MM-dd"
            type="daterange"
            v-if="item.datePickerIsRange"
            :disabled="item.disabled"
            :clearable="item.clearable"
            v-model="FormData[item.prop]"
            :placeholder="item.placeholder"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- switch开关 -->
          <el-switch
            v-if="item.switch"
            :disabled="item.disabled"
            v-model="FormData[item.prop]"
            @change="formSwitchChange($event, index, item.prop)"
          ></el-switch>
          <!-- radio单选框 -->
          <el-radio-group
            v-if="item.radio"
            :disabled="item.disabled"
            v-model="FormData[item.prop]"
          >
            <el-radio
              :label="options.label"
              :value="options.value"
              v-for="(options, index) in item.options"
              :key="index"
            >
            </el-radio>
          </el-radio-group>
          <!-- checkbox复选框 -->
          <el-checkbox-group
            v-if="item.checkbox"
            :disabled="item.disabled"
            v-model="FormData[item.prop]"
          >
            <el-checkbox
              :label="options.label"
              :key="options.value"
              v-for="options in item.options"
            >
            </el-checkbox>
          </el-checkbox-group>
          <!-- 文件上传 --><!-- 如果对象有值就回显，没有值就为空 -->
          <!-- <el-upload :accept="item.accept ? item.accept : 'PNG,JPEG'" v-if="item.upload" :ref="item.prop" :file-list=" FormData[item.prop] ? FormData[item.prop] : []" :action="`${uploadUrl}${item.uploadObj.fileType ? item.uploadObj.fileType : '' }`" :limit="item.uploadObj.limit" :class="{'hide':item.uploadObj.hideUpload || FormData[item.prop].length==item.uploadObj.limit}" :on-preview="handlePictureCardPreview" :on-remove="(file,fileList)=>handleRemove(file,fileList,item.uploadObj.limit,item.prop,index)" :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,item.uploadObj.limit,item.prop,index)"	list-type="picture-card" :auto-upload="true">
					<i slot="default" class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible" v-if="item.upload" :modal-append-to-body="false" width="40%">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog> -->

          <!-- 按钮 -->
          <el-button
            v-if="item.button"
            :disabled="item.disabled"
            :loading="item.loading"
            :icon="item.icon"
            :type="item.buttonType || 'primary'"
            @click="buttonClick(item.prop, index)"
            >{{ item.placeholder }}</el-button
          >
          <!-- text展示 -->
          <span v-if="item.text" v-text="FormData[item.prop]"></span>
          <!-- 计量单位 -->
          <span class="left10" v-if="item.unit">{{ item.unit }}</span>

          <!-- 高德地图 -->
          <!-- <div class="amap_div" v-if="item.aMap">
					<el-input size="small" v-model="FormData[item.prop]" @input="aMapInput($event,item.prop)"></el-input>
					<ul v-show="searchShow==item.prop" class="sreach_ul">
						<li @click="selectVal(sval,item.prop,index)" v-for=" (sval, index) in setSearchVal" :key="index">{{sval.name}}
							<span style="color:#8591A6 ;font-size: 12px;">{{sval.district}}</span>
						</li>
					</ul>
					<aMap :ref="'aMap'+item.prop" :aMapId="'aMapId'+item.prop" :location="FormData[item.prop+'location']" @cbSearch="cbSearch($event,item.prop)"></aMap>
				</div> -->
          <!-- <quillEditor v-if="item.quillEditor" :quill="FormData[item.prop]"></quillEditor> -->
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<!--  zoutiancong封装,date:20210429,详细使用见根目录@/views/home/testForm/testForm.vue,———————————————————————————————————————————————————————————————————————————————— -->
<script>
// import aMap from '../../map/aMap.vue'
// import quillEditor from '@/components/quillEditor/quillEditor.vue'
export default {
  name: "YgFrom",
  // components:{
  // 	quillEditor
  // },
  props: {
    inline: {
      type: Boolean,
      default: false,
    },
    formObj: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
    searchSelectOptionsCb: {
      type: Array,
    },
  },
  computed: {
    // FormObj:function(){
    //     return this.formobj
    // },
    // FormData:function(){
    //     return this.formData
    // }
  },
  data() {
    // let uploadFileUrl = this.$store.state.user.uploadFileUrl;
    return {
      FormData: this.formData,
      FormObj: this.formObj,
      // uploadUrl:uploadFileUrl,
      dialogImageUrl: "",
      searchSelectLoading: false,
      dialogVisible: false,
      disabled: false,
      searchShow: "", //高德地图input收索联想
      setSearchVal: [], //高德地图赋值搜索内容
    };
  },
  created() {},
  watch: {
    FormData: {
      deep: true,
      handler(newVal) {
        console.log("子组件接收到了参数...", newVal);
        // this.FormData = newVal;
      },
    },
  },
  methods: {
    //select变化调用
    selectChange(value, index, prop) {
      // this.FormData.term_key = "all";
      // console.log(this.FormData);
      this.$emit("selectChange", value, index, prop);
    },
    // input的input事件
    inputINPUT(value, index, prop) {
      this.$emit("inputINPUT", value, index, prop);
    },
    // input的change事件
    inputChange(value, index, prop) {
      this.$emit("inputChange", value, index, prop);
    },
    // 搜索类型select搜索
    remoteMethod(query, index, prop) {
      if (query) {
        this.searchSelectLoading = true;
        this.$emit("querySelectValue", query, index, prop);
        setTimeout(() => {
          this.FormObj[index].options = this.searchSelectOptionsCb;
          this.searchSelectLoading = false;
        }, 500);
      } else {
        this.searchSelectOptios = [];
      }
    },
    //switch变化
    formSwitchChange(val, index, prop) {
      this.$emit("formSwitchChange", val, index, prop);
    },
    //时间选择器变化
    dateTimeChange(val) {
      console.log(val);
      this.$emit("dateTimeChange", val);
    },
    //按钮点击事件
    buttonClick(prop, index) {
      this.$emit("buttonClick", prop, index);
    },

    //文件上传成功回调
    uploadSuccess(response, file, fileList, limit, prop, index) {
      this.FormObj[index].uploadObj.hideUpload = fileList.length == limit; //文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
      this.pushUpload(file, fileList, limit, prop);
    },
    //文件删除
    handleRemove(file, fileList, limit, prop, index) {
      this.FormObj[index].uploadObj.hideUpload = fileList.length == limit; //文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
      this.pushUpload(file, fileList, limit, prop);
    },
    // 文件预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //提交时验证表单，直接在父级调用
    submitForm() {
      let formValidate = Boolean;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          formValidate = true;
        } else {
          this.$message.warning("请把信息填写完整！");
          formValidate = false;
        }
      });
      return formValidate;
    },
    /* 清空表单
				逻辑：
				1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
				2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
			 */
    resetForm(uploadArr) {
      this.$refs.ruleForm.resetFields();
      if (uploadArr) {
        for (let i = 0; i < uploadArr.length; i++) {
          this.$refs[uploadArr[i]][0].clearFiles();
          let index = this.formObj.findIndex(
            (item) => item.prop == uploadArr[i]
          );
          this.FormObj[index].uploadObj.hideUpload = false;
        }
      }
    },
    // 单个字段验证
    validateFieldProp(prop) {
      let formValidate = Boolean;
      this.$refs.ruleForm.validateField(prop, (valid) => {
        if (!valid) {
          formValidate = true;
        } else {
          formValidate = false;
        }
      });
      return formValidate;
    },
    // 对文件上传，删除进行赋值，调用form验证
    pushUpload(file, fileList, limit, prop) {
      if (fileList.length > 0) {
        this.FormData[prop] = fileList;
      } else {
        // 表示没有数据,把字段置空
        this.FormData[prop] = "";
      }
      this.$refs.ruleForm.validateField(prop); //调用验证form表单的文件上传
    },
    // //地图input的input事件
    // aMapInput(value, prop) {
    // 	this.$refs[`aMap${prop}`][0].getSearch(value);
    // },
    // //子组件返回地图搜索值
    // cbSearch(val,prop) {
    // 	this.setSearchVal = val.tips; //子组件
    // 	this.searchShow = prop; //显示input输入联想
    // },
    // //选中地图值
    // selectVal(val,prop) {
    // 	// 赋值的时候，拿到键，及formobj的下标，进行赋值
    // 	this.FormData[prop] = val.name; //input输入框赋值
    // 	this.FormData.district = val.district; //传入省市区
    // 	let lngLat = {
    // 		lng: val.location.lng,
    // 		lat: val.location.lat
    // 	};
    // 	this.FormData[`${prop}location`] = lngLat;
    // 	this.searchShow = ''; //隐藏input输入联想
    // },
  },
};
</script>
 
<style lang="scss" scoped>
::v-deep .el-col {
  height: 30px;
}
::v-deep .el-input {
  width: 100%;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-date-editor {
  width: 100%;
}
// ::v-deep .el-date-editor .el-range-separator{
// 	width: 20px !important;
// }
::v-deep .el-range-editor--small.el-input__inner {
  width: 100%;
}

.el-textarea {
  width: 100%;
}

.hide {
  v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>